import React from 'react';
import {Router, Route, Link} from 'react-router';
import 'braft-editor/dist/index.css'
import BraftEditor from 'braft-editor'
import { ContentUtils } from 'braft-utils'
import Dropzone from 'react-dropzone'

import FileUploadProgress  from 'react-fileupload-progress';

import utils from '../../js/utils';
import config from '../../../config/config';

const excludeControls = [
  'letter-spacing',
  'line-height',
  'clear',
  'headings',
  'list-ol',
  'list-ul',
  'remove-styles',
  'superscript',
  'subscript',
  'hr',
  'text-align',
  'code',
  'blockquote',
  'emoji',
  "link",
  "text-color"
]

var ajax_xhr = null;

class ArticlesNew extends React.Component {
  constructor () {
    super();

    this.state = {
      nav: ["文章", "图集", "视频", "音频", "词库", "题库"],
      type_title: "",
      editorState: null,
      subjectEditorState: null,
      subjectAnalysisEditorState: null,
      article_litpic: "",

      pictures: [[]],
      pictures_class: [1],
      cur_pictures_class: 1,

      video_url: "",
      audio_url: "",
      video_file_name: "点击此处上传视频(mp4格式，不能超过50M)",
      audio_file_name: "点击此处上传音频(mp3格式，不能超过50M)",

      lexicon_audio_url: "",
      lexicon_audio_name: "点击此处上传音频(mp3格式，不能超过50M)",
      lexicon_word_picture: "",

      subject_options: [
        {
          option: "",
          status: true,
          audio_url: "",
        },
        {
          option: "",
          status: false,
          audio_url: "",
        },
        {
          option: "",
          status: false,
          audio_url: "",
        },
        {
          option: "",
          status: false,
          audio_url: "",
        }
      ],

      subject_options_type: 0,
      subject_right_and_wrong: 0,

      attribute: "",

      upload_url: []
    }

    this.uploadArticleLitpic = this.uploadArticleLitpic.bind(this);
    this.saveArticle = this.saveArticle.bind(this);

    this.submitContent = this.submitContent.bind(this);
    this.handleEditorChange = this.handleEditorChange.bind(this);
    this.handleSubjectEditorChange = this.handleSubjectEditorChange.bind(this);
    this.handleSubjectAnalysisEditorChange = this.handleSubjectAnalysisEditorChange.bind(this);
    this.myUploadFn = this.myUploadFn.bind(this);
    this.uploadPicturePic = this.uploadPicturePic.bind(this);
    this.deletePicturePic = this.deletePicturePic.bind(this);

    this.uploadVideo = this.uploadVideo.bind(this);
    this.uploadLexiconWordPicture = this.uploadLexiconWordPicture.bind(this);
  }

  componentDidMount () {
    let _this = this;
    let typeid = this.props.params.typeid;
    if (typeid) {
      utils.post("/get_column_nav", {typeid}, function (res) {
        console.log(res);
        if (parseInt(res.code) == 200) {
          _this.setState({
            type_title: res.type_title
          })
        }
      })
    }

    let aid = this.props.params.aid;
    if (typeid && aid) {
      utils.post("/get_article_content", {typeid, aid}, function (res) {
        console.log(res);
        if (parseInt(res.code) == 200) {
          let article = res.article;
          _this.refs.title.value = article.title;
          _this.refs.lexicon_symbol.value = article.lexicon_symbol;
          _this.refs.lexicon_chinese_meaning.value = article.lexicon_chinese_meaning;
          _this.refs.lexicon_english_meaning.value = article.lexicon_english_meaning;
          _this.refs.lexicon_englist_example.value = article.lexicon_englist_example;

          _this.refs.subject_score.value = article.subject_score;

          _this.setState({
            editorState: BraftEditor.createEditorState(article.body),
            article_litpic: article.litpic,
            pictures: article.pictures == null ? [[]] : JSON.parse(article.pictures),
            pictures_class: article.pictures_class == null ? [1] : article.pictures_class,
            video_url: article.video_url,
            video_file_name: article.video_file_name == "" ? "点击此处上传视频(mp4格式，不能超过50M)" : article.video_file_name,
            audio_file_name: article.audio_file_name == "" ? "点击此处上传音频(mp3格式，不能超过50M)" : article.audio_file_name,
            lexicon_audio_name: article.lexicon_audio_name == "" ? "点击此处上传音频(mp3格式，不能超过50M)" : article.lexicon_audio_name,

            lexicon_audio_url: article.lexicon_audio_url,
            lexicon_word_picture: article.lexicon_word_picture,

            subjectEditorState: BraftEditor.createEditorState(article.subject_title),
            subjectAnalysisEditorState: BraftEditor.createEditorState(article.subject_analysis),
            subject_options: JSON.parse(article.subject_options).length == 0 ? _this.state.subject_options : JSON.parse(article.subject_options),
            subject_options_type: parseInt(article.subject_options_type, 10),
            subject_right_and_wrong: article.subject_right_and_wrong,
            attribute: article.props,
            upload_url: article.upload_url
          })

          console.log(JSON.parse(article.subject_options));
        }
      })
    }

    // 假设此处从服务端获取html格式的编辑器内容
    // const htmlContent = await fetchEditorContent()
    // 使用BraftEditor.createEditorState将html字符串转换为编辑器需要的editorState数据
  }

  uploadArticleLitpic () {
    let subData = new FormData(document.getElementById('article_litpic'));
    let _this   = this;
    utils.post_image("/upload_article_litpic", subData, function (url) {
      let upload_url = _this.state.upload_url;
      upload_url.push(url);
      _this.setState({
        article_litpic: url,
        upload_url: upload_url
      })
    })
  }

  uploadLexiconWordPicture () {
    let subData = new FormData(document.getElementById('lexicon_word_picture_form'));
    let _this   = this;
    utils.post_image("/upload_lexicon_word_picture", subData, function (url) {
      let upload_url = _this.state.upload_url;
      upload_url.push(url);
      _this.setState({
        lexicon_word_picture: url,
        upload_url
      })
    })
  }

  submitContent () {
    // 在编辑器获得焦点时按下ctrl+s会执行此方法
    // 编辑器内容提交到服务端之前，可直接调用editorState.toHTML()来获取HTML格式的内容
    const htmlContent = this.state.editorState.toHTML()
  }

  handleEditorChange (editorState) {
    this.setState({ editorState })
  }

  handleSubjectEditorChange (subjectEditorState) {
    this.setState({ subjectEditorState })
  }

  handleSubjectAnalysisEditorChange (subjectAnalysisEditorState) {
    this.setState({ subjectAnalysisEditorState })
  }

  uploadPicturePic () {
    let fileInput = $("#picture_pic").find("input[type='file']")[0];
    let fileList = [];
    let _this   = this;
    for (let i = 0, len = fileInput.files.length; i < len; i++) {
      (function (file) {
        let subData = new FormData();
        subData.append("picture", file)
        let cur_pictures_class = _this.state.cur_pictures_class;
        (function (subData) {
          utils.post_image("/upload_picture_pic", subData, function (url) {
            let pictures = _this.state.pictures;
            pictures[cur_pictures_class - 1].push(url)
            let upload_url = _this.state.upload_url;
            upload_url.push(url);
            _this.setState({
              pictures: pictures,
              upload_url: upload_url
            })
          })
        })(subData)

      })(fileInput.files[i])
    }
  }

  deletePicturePic (event) {
    let ele = event.target || event.srcElement;
    let idx = ele.getAttribute('data-idx');

    let pictures = this.state.pictures;
    let cur_pictures_class = this.state.cur_pictures_class;
    // console.log(idx);
    pictures[cur_pictures_class-1].splice(parseInt(idx, 10), 1);
    this.setState({
      pictures: pictures
    })
  }

  saveArticle () {
    let title = this.refs.title.value;
    let _this = this;
    let channel = this.props.params.id;

    if (!utils.checkValue(title)  && parseInt(channel, 10) != 5) {
      $('.modal-body').text("请填写标题");
      $('#myModal').modal('show');
      return
    }


    let aid = this.props.params.aid;

    let typeid = this.props.params.typeid;
    let body = this.state.editorState.toHTML();
    let article_litpic = this.state.article_litpic;

    // if (!utils.checkValue(article_litpic) && parseInt(channel, 10) != 4  && parseInt(channel, 10) != 5) {
    //   $('.modal-body').text("请上传封面图片");
    //   $('#myModal').modal('show');
    //   return
    // }

    console.log("body", body);

    let pictures = this.state.pictures;
    let video_url = this.state.video_url;
    let video_file_name = this.state.video_file_name;
    let audio_file_name = this.state.audio_file_name;
    let audio_url = this.state.audio_url;

    let lexicon_symbol = this.refs.lexicon_symbol.value;
    let lexicon_english_meaning = this.refs.lexicon_english_meaning.value;
    let lexicon_chinese_meaning = this.refs.lexicon_chinese_meaning.value;
    let lexicon_audio_url = this.state.lexicon_audio_url;
    let lexicon_audio_name = this.state.lexicon_audio_name;
    let lexicon_word_picture = this.state.lexicon_word_picture;
    let lexicon_englist_example = this.refs.lexicon_englist_example.value;

    let subject_title = this.state.subjectEditorState.toHTML();
    let subject_analysis = this.state.subjectAnalysisEditorState.toHTML();
    let subject_options_type = parseInt(this.state.subject_options_type, 10);
    let subject_score = this.refs.subject_score.value.trim();

    if (video_url == "" && parseInt(channel, 10) == 2) {
      $('.modal-body').text("请上传视频");
      $('#myModal').modal('show');
      return
    }

    if (audio_url == "" && parseInt(channel, 10) == 3) {
      $('.modal-body').text("请上传音频");
      $('#myModal').modal('show');
      return
    }

    if (!utils.checkValue(lexicon_symbol) && parseInt(channel, 10) == 4) {
      $('.modal-body').text("请填写音标");
      $('#myModal').modal('show');
      return
    }

    if (!utils.checkValue(lexicon_chinese_meaning) && parseInt(channel, 10) == 4) {
      $('.modal-body').text("请填写中文翻译");
      $('#myModal').modal('show');
      return
    }

    if (!utils.checkValue(lexicon_audio_url) && parseInt(channel, 10) == 4) {
      $('.modal-body').text("请上传单词的音频");
      $('#myModal').modal('show');
      return
    }

    if (!utils.checkValue(subject_title) && parseInt(channel, 10) == 5) {
      $('.modal-body').text("请填写题目");
      $('#myModal').modal('show');
      return
    }

    let subject_options = []
    console.log("subject_options_type", subject_options_type);
    if (subject_options_type == 0 && parseInt(channel, 10) == 5) {
      let $oneInput = $('.question-type-one').find('input[type="text"]');
      let one_input_check_idx = parseInt($('.question-type-one').find('input[type="radio"]:checked').val(), 10);
      $oneInput.each(function (index) {
        subject_options.push({
          option: $(this).val().trim(),
          status: one_input_check_idx == index ? true : false
        })
      })
    }

    console.log("subject_options", subject_options);

    if (subject_options_type == 1 && parseInt(channel, 10) == 5) {
      let $twoInput = $('.question-type-two').find('input[type="text"]');
      let two_input_check_idx = []
      $('.question-type-two').find('input[type="checkbox"]:checked').each(function () {
        two_input_check_idx.push(parseInt($(this).val(), 10))
      })

      $twoInput.each(function (index) {
        subject_options.push({
          option: $(this).val().trim(),
          status: two_input_check_idx.indexOf(index) != -1 ? true : false
        })
      })
    }

    console.log("subject_options", subject_options);

    if (!utils.checkRate(subject_score) && parseInt(channel, 10) == 5 && subject_options_type != -4) {
      $('.modal-body').text("分数必须是数字");
      $('#myModal').modal('show');
      return
    }

    let props = [];
    $('.bamboo-props').find('input[type="checkbox"]:checked').each(function () {
      props.push($(this).val())
    })

    props = props.join(",")

    let subject_right_and_wrong = parseInt($(".question-type-three").find('input[type="radio"]:checked').val(), 10);

    let senddata = {
      channel,
      typeid,
      body,
      title,
      litpic: article_litpic,
      pictures: JSON.stringify(pictures),
      pictures_class: this.state.pictures_class,
      audio_url,
      video_url,
      video_file_name,
      audio_file_name,

      lexicon_symbol,
      lexicon_english_meaning,
      lexicon_chinese_meaning,
      lexicon_audio_url,
      lexicon_audio_name,
      lexicon_word_picture,
      lexicon_englist_example,

      subject_title,
      subject_analysis,
      subject_options: JSON.stringify(subject_options),
      subject_options_type,

      subject_right_and_wrong,
      subject_score,

      props,
      upload_url: this.state.upload_url
    }

    console.log(senddata);

    if (aid) {
      senddata.aid = aid
      utils.post("/update_column_article", senddata, function (res) {
        $('.modal-body').text(res.errmsg);
        $('#myModal').modal('show');
      })
    }
    else {
      utils.post("/save_column_article", senddata, function (res) {
        if (parseInt(res.code, 10) != 200) {
          $('.modal-body').text(res.errmsg);
          $('#myModal').modal('show');
          return
        }

        window.location.href = "/#/zuopin/articles/1/1";
      })
    }
  }

  myUploadFn (param) {
    let subData = new FormData();
    subData.append('file', param.file);
    subData.append("token", $.cookie('token'));
    let _this   = this;
    $.ajax({
        type: "POST",
        url: utils.url + "/upload_article_file",
        data: subData,
        cache: false,
        contentType: false,
        processData: false,
        success: function(res) {
          if (parseInt(res.code) == 200) {

            let upload_url = _this.state.upload_url;
            upload_url.push(res.url);
            param.success({
              url: "http://www.xinxingtianxia.cn" + res.url,
              upload_url: upload_url
            })
          }
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
          param.error({
            msg: '上传失败，请检查网络后重试'
          })
        }
    });
  }

  uploadVideo (e) {
    let ele = e.target || e.srcElement;
    let subData = new FormData(document.getElementById('video_file_form'));
    subData.append("token", $.cookie('token'));

    var bar = $('.bar');
    var percent = $('.percent');
    let filename = $(ele).val().replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1") + ".mp4";

    let _this = this;
    _this.setState({
      video_file_name: filename
    })
    // $("#video_file_name").text(filename);

    ajax_xhr = $.ajax({
        type: "POST",
        url: utils.url + "/upload_video",
        data: subData,
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() {
          $('.video-progress').show();
          $('.cancel-upload').show();
          var xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              percentComplete = parseInt(percentComplete * 100);
              if (percentComplete == 100) {
                _this.setState({
                  audio_file_name: filename + " (已成功上传)"
                })
                $('.cancel-upload').hide();
              }
              var percentVal = percentComplete + '%';
              bar.width(percentVal);
              percent.html(percentVal);
            }
          }, false);

          xhr.addEventListener("abort", function () {
            // status.html("Upload Aborted");
          }, false);

          return xhr;
        },
        success: function(res) {
          console.log(res);
          if (parseInt(res.code, 10) == 200) {
            let upload_url = _this.state.upload_url;
            upload_url.push(res.url);
            _this.setState({
              video_url: res.url,
              upload_url: upload_url
            })
          }
        },
        error: function(error) {
          console.log(error);
        }
    })
  }

  uploadAudio (e) {
    let ele = e.target || e.srcElement;
    let subData = new FormData(document.getElementById('audio_file_form'));
    subData.append("token", $.cookie('token'));

    var bar = $('.bar');
    var percent = $('.percent');

    let _this   = this;

    let filename = $(ele).val().replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1") + ".mp3";

    // let _this = this;
    _this.setState({
      audio_file_name: filename
    })

    ajax_xhr = $.ajax({
        type: "POST",
        url: utils.url + "/upload_audio",
        data: subData,
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() {
          $('.video-progress').show();
          $('.cancel-upload').show();
          var xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              percentComplete = parseInt(percentComplete * 100);
              if (percentComplete == 100) {
                _this.setState({
                  audio_file_name: filename + " (已成功上传)"
                })
                $('.cancel-upload').hide();
              }
              var percentVal = percentComplete + '%';
              bar.width(percentVal);
              percent.html(percentVal);
            }
          }, false);

          xhr.addEventListener("abort", function () {
            // status.html("Upload Aborted");
          }, false);

          return xhr;
        },
        success: function(res) {
          console.log(res);
          let upload_url = _this.state.upload_url;
          upload_url.push(res.url);
          if (parseInt(res.code, 10) == 200) {
            _this.setState({
              audio_url: res.url,
              upload_url: upload_url
            })
          }
        },
        error: function(error) {
          console.log(error);
        }
    })
  }

  uploadLexiconAudio (e) {
    let ele = e.target || e.srcElement;
    let subData = new FormData(document.getElementById('audio_lexicon_file_form'));
    subData.append("token", $.cookie('token'));

    var bar = $('.bar');
    var percent = $('.percent');

    let _this   = this;

    let filename = $(ele).val().replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi,"$1") + ".mp3";

    // let _this = this;
    _this.setState({
      lexicon_audio_name: filename
    })

    ajax_xhr = $.ajax({
        type: "POST",
        url: utils.url + "/upload_lexicon_audio",
        data: subData,
        cache: false,
        contentType: false,
        processData: false,
        xhr: function() {
          $('.video-progress').show();
          $('.cancel-upload').show();
          var xhr = new window.XMLHttpRequest();
          xhr.upload.addEventListener("progress", function(evt) {
            if (evt.lengthComputable) {
              var percentComplete = evt.loaded / evt.total;
              percentComplete = parseInt(percentComplete * 100);
              if (percentComplete == 100) {
                _this.setState({
                  audio_file_name: filename + " (已成功上传)"
                })
                $('.cancel-upload').hide();
              }
              var percentVal = percentComplete + '%';
              bar.width(percentVal);
              percent.html(percentVal);
            }
          }, false);

          xhr.addEventListener("abort", function () {
            // status.html("Upload Aborted");
          }, false);

          return xhr;
        },
        success: function(res) {
          console.log(res);
          if (parseInt(res.code, 10) == 200) {
            let upload_url = _this.state.upload_url;
            upload_url.push(res.url);
            _this.setState({
              lexicon_audio_url: res.url,
              upload_url: upload_url
            })
          }
        },
        error: function(error) {
          console.log(error);
        }
    })
  }

  stopUploadVideo () {
    ajax_xhr.abort();
    $("input[type=file]").val("");
    $('.video-progress').hide();
    // $('#video_file_name').text("点击此处上传视频(mp4格式，不能超过50M)");
    this.setState({
      video_file_name: "点击此处上传视频(mp4格式，不能超过50M)",
      audio_file_name: "点击此处上传音频(mp3格式，不能超过50M)",
      lexicon_audio_name: "点击此处上传音频(mp3格式，不能超过50M)"
    })
  }

  changeQuestionType (e) {
    let ele = e.target || e.srcElement;
    let value = $(ele).val();
    this.setState({
      subject_options_type: parseInt(value, 10)
    })
  }

  changeRightWrong (e) {
    console.log('changeRightWrong');
    let ele = e.target || e.srcElement;
    let value = $(ele).val();
    console.log(value);
    this.setState({
      subject_right_and_wrong: parseInt(value, 10)
    })
  }

  changeTypeOneValue (e) {
    let ele = e.target || e.srcElement;
    let idx = parseInt(ele.getAttribute('data-idx'), 10);
    let subject_options = this.state.subject_options;
    subject_options[idx].option = ele.value;
    this.setState({
      subject_options: subject_options
    })
  }

  changeTypeOneChecked (e) {
    let ele = e.target || e.srcElement;
    let status = ele.getAttribute('data-status') == "true" ? false : true;
    let idx = parseInt(ele.value, 10);
    let subject_options = this.state.subject_options;
    for (let i = 0, len = subject_options.length; i < len; i++) {
      if (i == idx) {
        subject_options[i].status = true;
      }
      else {
        subject_options[i].status = false;
      }
    }

    this.setState({
      subject_options: subject_options
    })
  }

  changeTypeTwoChecked (e) {
    let ele = e.target || e.srcElement;
    let status = ele.getAttribute('data-status') == "true" ? false : true;
    let idx = parseInt(ele.value, 10);
    let subject_options = this.state.subject_options;
    subject_options[idx].status = status;
    this.setState({
      subject_options: subject_options
    })
  }

  changeProps (e) {
    let ele = e.target || e.srcElement;
    let p = $(ele).val();
    let props = this.state.attribute.split(",");
    if (props.indexOf(p) != -1) {
      for (let i = 0, len = props.length; i < len; i++) {
        if (props[i] == p) {
          props.splice(i, 1)
          break
        }
      }
    }
    else {
      props.push(p)
    }

    this.setState({
      attribute: props.join(',')
    })
  }

  closeImport () {
    $(".bamboo-import-article").hide();
  }

  showImport () {
    $(".bamboo-import-article").show();
  }

  importUrlFromWx (e) {
    let ele = e.target || e.srcElement;
    let import_url = this.refs.import_url.value.trim();

    if (!utils.checkValue(import_url)) {
      $(ele).next('p').text("请输入文章链接").show();
      return
    }

    $(ele).next('p').text("").hide();

    let _this = this;
    utils.post("/import_article_from_wx_url", {import_url}, function (res) {
      console.log(res);
      if (parseInt(res.code, 10) == 200) {
        _this.refs.title.value = res.title;
        _this.setState({
          editorState: BraftEditor.createEditorState(res.content)
        })
      }
      $(ele).next('p').text(res.errmsg).show();
    })
  }

  addPicture () {
    let pictures_class = this.state.pictures_class;
    pictures_class.push(parseInt(pictures_class[pictures_class.length - 1], 10) + 1)
    let pictures = this.state.pictures;
    pictures.push([])
    this.setState({
      pictures_class: pictures_class,
      pictures: pictures
    })
  }

  changePicturesClass (e) {

    let ele = e.target || e.srcElement;
    let idx = $(ele).attr('data-idx');

    this.setState({
      cur_pictures_class: idx
    })
  }

  render () {
    const { editorState , subjectEditorState, subjectAnalysisEditorState} = this.state
    let aid = this.props.params.aid;
    let deletePicturePic = this.deletePicturePic;
    let changeTypeOneValue = this.changeTypeOneValue.bind(this);
    let changeTypeOneChecked = this.changeTypeOneChecked.bind(this);
    let changeTypeTwoChecked = this.changeTypeTwoChecked.bind(this);
    let changePicturesClass = this.changePicturesClass.bind(this);

    let cur_pictures_class = this.state.cur_pictures_class;
    return (
      <div>
        <div className='bamboo-nav' style={{display: aid ? "none" : "block"}}>当前位置：内容管理 > {this.state.type_title} > 新增作品集</div>
        <div className='bamboo-nav' style={{display: aid ? "block" : "none"}}>当前位置：内容管理 > {this.state.type_title} > 更新作品集</div>
        <div className='bamboo-content' style={{minHeight: (window.innerHeight - 75 - 65) + 'px'}}>
          <div className='bamboo-article'>
            <div className="bamboo-import-article">
              <div onClick={this.closeImport.bind(this)}></div>
              <div>
                <h3>从微信公众号导入文章</h3>
                <input type="text" className="form-control" ref="import_url" placeholder="请输入文章链接 http://"/>
                <div>
                  <a href="javascript:void(0)" onClick={this.importUrlFromWx.bind(this)} className="bamboo-btn-green">导入</a>
                  <p></p>
                </div>
              </div>
            </div>
            <div className='bamboo-article-top'>
              <div></div>
              <a href="javascript:void(0)" className="bamboo-btn-green" onClick={this.saveArticle}>{aid ? "更新" : "保存"}</a>
            </div>
            <div className='bamboo-article-title' style={{display: parseInt(this.props.params.id, 10) == 5 ? "none" : "block"}}>
              <input type="text" placeholder={parseInt(this.props.params.id, 10) == 4 ? "单词" : "作品集名称"} ref="title"/>
              <a href="javascript:void(0)" className="bamboo-btn-red" onClick={this.showImport.bind(this)} style={{display: parseInt(this.props.params.id, 10) == 0 ? "inline-block" : "none"}}>导入微信文章</a>
            </div>

            <div className="bamboo-props" style={{display: parseInt(this.props.params.id, 10) == 0 ? "block" : "none"}}>
              <h3 className='bamboo-article-body-title'>自定义属性</h3>
              <div>
                <span><input type="checkbox" value="h" onChange={this.changeProps.bind(this)} checked={this.state.attribute.indexOf('h') != -1 ? true : false} /> 头条</span>
                <span><input type="checkbox" value="c" onChange={this.changeProps.bind(this)} checked={this.state.attribute.indexOf('c') != -1 ? true : false} /> 推荐</span>
                <span><input type="checkbox" value="f" onChange={this.changeProps.bind(this)} checked={this.state.attribute.indexOf('f') != -1 ? true : false} /> 幻灯片</span>
              </div>
            </div>

            <div className="bamboo-article-video" style={{display: parseInt(this.props.params.id, 10) == 2 ? "block" : "none"}}>
              <h3 className='bamboo-article-body-title'>上传视频</h3>
              <div className="bamboo-upload-box">
                <div className='bamboo-video-upload'>
                  <form action="/upload_video" method="post" id="video_file_form" encType="multipart/form-data">
                      <input type="file" name="videofile" onChange={this.uploadVideo} accept="video/mp4"/>
                  </form>
                  <div>
                    <img src="/static/icon/upload.png" /><span>{this.state.video_file_name}</span>
                  </div>
                </div>

                <div className='video-progress'>
                  <div className="xqf-progress">
                      <div className="bar"></div>
                  </div>
                  <a href="javascript:void(0)" title="取消上传" className="cancel-upload" onClick={this.stopUploadVideo.bind(this)}>
                    <img src="/static/icon/close.png" />
                  </a>
                </div>
              </div>
            </div>

            <div className="bamboo-article-video" style={{display: parseInt(this.props.params.id, 10) == 3 ? "block" : "none"}}>
              <h3 className='bamboo-article-body-title'>上传音频</h3>

              <div className="bamboo-upload-box">
                <div className='bamboo-video-upload'>
                  <form action="/upload_audio" method="post" id="audio_file_form" encType="multipart/form-data">
                      <input type="file" name="audiofile" onChange={this.uploadAudio.bind(this)} accept="audio/mp3"/>
                  </form>
                  <div>
                    <img src="/static/icon/upload.png" /><span>{this.state.audio_file_name}</span>
                  </div>
                </div>

                <div className='video-progress'>
                  <div className="xqf-progress">
                      <div className="bar"></div>
                  </div>
                  <a href="javascript:void(0)" title="取消上传" className="cancel-upload" onClick={this.stopUploadVideo.bind(this)}>
                    <img src="/static/icon/close.png" />
                  </a>
                </div>
              </div>
            </div>

            <div style={{display: [0, 2, 3].indexOf(parseInt(this.props.params.id, 10)) != -1 ? "block" : "none"}}>
              <h3 className='bamboo-article-body-title'>{parseInt(this.props.params.id, 10) == 2 ? "视频描述" : parseInt(this.props.params.id, 10) == 3 ? "音频描述" : "内容"}</h3>
              <div className="bamboo-article-body">
                <BraftEditor
                  value={editorState}
                  onChange={this.handleEditorChange}
                  onSave={this.submitContent}
                  media={{uploadFn: this.myUploadFn}}
                />
              </div>
            </div>

            <div style={{display: parseInt(this.props.params.id, 10) == 1 ? "block" : "none"}}>
              <h3 className='bamboo-article-body-title'>作品集图片</h3>
              <div className='scrollbar-macosx bamboo-article-picture-box'>
                <div>
                  <div>
                    {
                      this.state.pictures_class.map(function (item, idx) {
                        return <a href="javascript:void(0)" onClick={changePicturesClass} data-idx={item} className={cur_pictures_class == item ? "click" : ""} key={idx}>分组{item}<span>></span></a>
                      })
                    }
                  </div>
                  <span href="javascript:void(0)" onClick={this.addPicture.bind(this)}>+添加分组</span>
                </div>
                <div className="bamboo-article-picture" style={{height: "500px", overflowY:"scroll"}}>
                  {
                    this.state.pictures[cur_pictures_class - 1].map(function (item, idx) {
                      return <div key={idx}>
                        <img src={"http://www.xinxingtianxia.cn" + item} />
                        <div>
                          <img src="/static/icon/delete-white.png" onClick={deletePicturePic} data-idx={idx}/>
                        </div>
                      </div>
                    })
                  }
                  <div className="picture-add">
                    <form action="/upload_picture_pic/" name="picture_pic" id="picture_pic"  method="post" encType="multipart/form-data">
                        <input type="file" name="picture" multiple accept="image/jpg,image/jpeg,image/png,image/gif" onChange={this.uploadPicturePic}/>
                    </form>
                    <img src="/static/icon/plus.png" />
                    <p>上传作品</p>
                  </div>
                </div>
              </div>
            </div>

            <div className="bamboo-article-litpic" style={{display: [1,4,5].indexOf(parseInt(this.props.params.id, 10)) != -1 ? "none" : "block"}}>
              <h3 className='bamboo-article-body-title'>封面</h3>
              <div className='bamboo-upload'>
                <form action="/upload_article_litpic/" name="article_litpic" id="article_litpic"  method="post" encType="multipart/form-data">
                    <input type="file" name="litpic" accept="image/jpg,image/jpeg,image/png,image/gif" onChange={this.uploadArticleLitpic}/>
                </form>
                <img style={{display: this.state.article_litpic == "" ? "none" : "block"}} src={"http://www.xinxingtianxia.cn" + this.state.article_litpic} />
              </div>
            </div>

            {/* 词库 */}

            <div className="bamboo-article-lexicon" style={{display: parseInt(this.props.params.id, 10) == 4 ? "block" : "none"}}>
              <h3 className='bamboo-article-body-title'>音标</h3>
              <div>
                <input type="text" className="form-control" ref="lexicon_symbol"/>
              </div>
              <h3 className='bamboo-article-body-title'>单词读音</h3>
              <div>
                <div className="bamboo-upload-box">
                  <div className='bamboo-video-upload'>
                    <form action="/upload_lexicon_audio" method="post" id="audio_lexicon_file_form" encType="multipart/form-data">
                        <input type="file" name="audiolexiconfile" onChange={this.uploadLexiconAudio.bind(this)} accept="audio/mp3"/>
                    </form>
                    <div>
                      <img src="/static/icon/upload.png" /><span>{this.state.lexicon_audio_name}</span>
                    </div>
                  </div>
                  <div className='video-progress'>
                    <div className="xqf-progress">
                        <div className="bar"></div>
                    </div>
                    <a href="javascript:void(0)" title="取消上传" className="cancel-upload" onClick={this.stopUploadVideo.bind(this)}>
                      <img src="/static/icon/close.png" />
                    </a>
                  </div>
                </div>
              </div>
              <h3 className='bamboo-article-body-title'>中文释义</h3>
              <div>
                <textarea className="form-control" ref="lexicon_chinese_meaning"/>
              </div>
              <h3 className='bamboo-article-body-title'>英文释义</h3>
              <div>
                <textarea className="form-control" ref="lexicon_english_meaning"/>
              </div>
              <h3 className='bamboo-article-body-title'>象形图片</h3>
              <div className='bamboo-upload'>
                <form action="/upload_lexicon_word_picture/" name="lexicon_word_picture_form_name" id="lexicon_word_picture_form"  method="post" encType="multipart/form-data">
                    <input type="file" name="lexiconwordpicture" accept="image/jpg,image/jpeg,image/png,image/gif" onChange={this.uploadLexiconWordPicture}/>
                </form>
                <img style={{display: this.state.lexicon_word_picture == "" ? "none" : "block"}} src={"http://www.xinxingtianxia.cn" + this.state.lexicon_word_picture} />
              </div>
              <h3 className='bamboo-article-body-title'>例句</h3>
              <div>
                <textarea className="form-control" ref="lexicon_englist_example"/>
              </div>
            </div>

            {/* 题库 */}

            <div className="bamboo-article-question" style={{display: parseInt(this.props.params.id, 10) == 5 ? "block" : "none"}}>
              <h3 className='bamboo-article-body-title'>题目</h3>
              <div className="bamboo-article-question-body">
                  <BraftEditor
                    value={subjectEditorState}
                    onChange={this.handleSubjectEditorChange}
                    onSave={this.submitContent}
                    media={{
                      uploadFn: this.myUploadFn,
                      accepts: {
                        image: 'image/png,image/jpeg,image/gif,image/webp,image/apng,image/svg',
                        video: false,
                        audio: false
                      }
                    }}
                    excludeControls={excludeControls}
                    viewWrapper=".question-wrapper"
                  />
              </div>

              <h3 className='bamboo-article-body-title'>解析</h3>
              <div className="bamboo-article-question-body">
                  <BraftEditor
                    value={subjectAnalysisEditorState}
                    onChange={this.handleSubjectAnalysisEditorChange}
                    onSave={this.submitContent}
                    media={{
                      uploadFn: this.myUploadFn,
                      accepts: {
                        image: 'image/png,image/jpeg,image/gif,image/webp,image/apng,image/svg',
                        video: false,
                        audio: false
                      }
                    }}
                    excludeControls={excludeControls}
                    viewWrapper=".question-wrapper"
                  />
              </div>
              <div className='question-type'>
                <span>类型</span>
                <div>
                  <span><input type='radio' name="subject_options_type" onChange={this.changeQuestionType.bind(this)} value="0" checked={this.state.subject_options_type == 0 ? true : false}/> 单选题</span>
                  <span><input type='radio' name="subject_options_type" onChange={this.changeQuestionType.bind(this)} value="1" checked={this.state.subject_options_type == 1 ? true : false}/> 多选题</span>
                  <span><input type='radio' name="subject_options_type" onChange={this.changeQuestionType.bind(this)} value="2" checked={this.state.subject_options_type == 2 ? true : false}/> 判断对错</span>
                  <span><input type='radio' name="subject_options_type" onChange={this.changeQuestionType.bind(this)} value="3" checked={this.state.subject_options_type == 3 ? true : false}/> 简答题</span>
                  <span><input type='radio' name="subject_options_type" onChange={this.changeQuestionType.bind(this)} value="4" checked={this.state.subject_options_type == 4 ? true : false}/> 无选项</span>
                </div>
              </div>
              <div className="question-type-one" style={{display: this.state.subject_options_type == 0 ? "block" : "none"}}>
                <table className="bamboo-table">
                  <thead>
                    <tr>
                      <th>选项</th>
                      <th>正确选项</th>
                    </tr>
                  </thead>
                  <tbody>
                    {
                      this.state.subject_options.map(function (item, idx) {
                        return <tr key={idx}>
                          <td><input className="form-control" type="text" data-idx={idx} onChange={changeTypeOneValue} value={item.option}/></td>
                          <td style={{width:"6rem"}}><input type="radio" data-status={item.status} value={idx} name="question_type_one" onChange={changeTypeOneChecked} checked={item.status}/></td>
                        </tr>
                      })
                    }
                  </tbody>
                </table>
              </div>
              <div className="question-type-two" style={{display: this.state.subject_options_type == 1 ? "block" : "none"}}>
                <table className="bamboo-table">
                  <thead>
                    <tr>
                      <th>选项</th>
                      <th>正确选项</th>
                    </tr>
                  </thead>
                  <tbody>
                    {
                      this.state.subject_options.map(function (item, idx) {
                        return <tr key={idx}>
                          <td><input className="form-control" type="text" onChange={changeTypeOneValue} value={item.option}/></td>
                          <td style={{width:"6rem"}}><input type="checkbox" value={idx} name="question_type_two" onChange={changeTypeTwoChecked} checked={item.status}/></td>
                        </tr>
                      })
                    }
                  </tbody>
                </table>
              </div>
              <div className="question-type-three" style={{display: this.state.subject_options_type == 2 ? "block" : "none"}}>
                <span><input type="radio" name="subject_right_and_wrong" onChange={this.changeRightWrong.bind(this)} checked={this.state.subject_right_and_wrong == 0 ? true : false} value="0"/> 对</span>
                <span><input type="radio" name="subject_right_and_wrong" onChange={this.changeRightWrong.bind(this)} checked={this.state.subject_right_and_wrong == 1 ? true : false} value="1"/> 错</span>
              </div>
              <div className="question-score" style={{display: this.state.subject_options_type == 4 ? "none" : "block"}}>
                <h3>
                  <span>本题分数</span>
                  <input type="text" className="form-control" ref="subject_score"/>
                </h3>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default ArticlesNew;
